{% extends "base.html" %}

{% block title %}管理后台 - Ruiyun Cloud{% endblock %}

{% block content %}
<div class="dashboard">
    <div class="dashboard-header">
        <h1>📊 管理后台</h1>
        <p>欢迎回来, <strong>{{ admin.username }}</strong>!</p>
    </div>

    <!-- Statistics Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">📚</div>
            <div class="stat-content">
                <div class="stat-value">{{ doc_count }}</div>
                <div class="stat-label">文档总数</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">✅</div>
            <div class="stat-content">
                <div class="stat-value">{{ doc_count }}</div>
                <div class="stat-label">已发布</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">👁️</div>
            <div class="stat-content">
                <div class="stat-value">-</div>
                <div class="stat-label">总浏览量</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">📝</div>
            <div class="stat-content">
                <div class="stat-value">{{ recent_docs|length }}</div>
                <div class="stat-label">最近更新</div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="quick-actions">
        <h2>快捷操作</h2>
        <div class="action-buttons">
            <a href="{{ url_for('admin.create') }}" class="action-btn action-btn-primary">
                <span class="action-icon">➕</span>
                <span class="action-text">创建新文档</span>
            </a>
            <a href="{{ url_for('public.index') }}" class="action-btn action-btn-secondary">
                <span class="action-icon">👁️</span>
                <span class="action-text">查看文档列表</span>
            </a>
            <a href="{{ url_for('admin.change_password') }}" class="action-btn action-btn-secondary">
                <span class="action-icon">🔒</span>
                <span class="action-text">修改密码</span>
            </a>
        </div>
    </div>

    <!-- Recent Documents -->
    {% if recent_docs %}
    <div class="recent-docs">
        <h2>最近更新的文档</h2>
        <div class="docs-table">
            <table>
                <thead>
                    <tr>
                        <th>标题</th>
                        <th>格式</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for doc in recent_docs %}
                    <tr>
                        <td>
                            <a href="{{ url_for('public.view_document', id=doc.id) }}" class="doc-link">
                                {{ doc.title }}
                            </a>
                        </td>
                        <td>
                            <span class="format-badge format-{{ doc.format }}">
                                {{ doc.format }}
                            </span>
                        </td>
                        <td>
                            {% if doc.is_locked %}
                            <span class="status-badge status-locked">🔒 已锁定</span>
                            {% else %}
                            <span class="status-badge status-public">🌐 公开</span>
                            {% endif %}
                        </td>
                        <td>{{ doc.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                        <td>
                            <a href="{{ url_for('public.view_document', id=doc.id) }}" class="btn btn-sm btn-outline">查看</a>
                            <a href="{{ url_for('admin.edit', id=doc.id) }}" class="btn btn-sm btn-outline">编辑</a>
                            <button onclick="toggleLock({{ doc.id }}, '{{ doc.title }}', {{ 'true' if doc.is_locked else 'false' }})" class="btn btn-sm btn-outline btn-lock">
                                {{ '解锁' if doc.is_locked else '锁定' }}
                            </button>
                            <button onclick="deleteDoc({{ doc.id }}, '{{ doc.title }}')" class="btn btn-sm btn-outline btn-danger">删除</button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_css %}
<style>
    .dashboard-header {
        margin-bottom: 2rem;
    }

    .dashboard-header h1 {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        background: white;
        padding: 1.5rem;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .stat-icon {
        font-size: 3rem;
    }

    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: #667eea;
    }

    .stat-label {
        color: #666;
        font-size: 0.9rem;
    }

    .quick-actions {
        background: white;
        padding: 1.5rem;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        margin-bottom: 2rem;
    }

    .quick-actions h2 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .action-buttons {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    .action-btn {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.3s;
        border: 2px solid transparent;
    }

    .action-btn-primary {
        background: #667eea;
        color: white;
    }

    .action-btn-primary:hover {
        background: #5568d3;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

    .action-btn-secondary {
        background: #f8f9fa;
        color: #333;
        border-color: #e9ecef;
    }

    .action-btn-secondary:hover {
        background: white;
        border-color: #667eea;
        transform: translateY(-2px);
    }

    .action-icon {
        font-size: 1.5rem;
    }

    .action-text {
        font-weight: 500;
    }

    .recent-docs {
        background: white;
        padding: 1.5rem;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .recent-docs h2 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .docs-table table {
        width: 100%;
        border-collapse: collapse;
    }

    .docs-table th {
        text-align: left;
        padding: 0.75rem;
        background: #f8f9fa;
        border-bottom: 2px solid #e9ecef;
        font-weight: 600;
    }

    .docs-table td {
        padding: 0.75rem;
        border-bottom: 1px solid #e9ecef;
    }

    .docs-table tr:hover {
        background: #f8f9fa;
    }

    .doc-link {
        color: #667eea;
        text-decoration: none;
        font-weight: 500;
    }

    .doc-link:hover {
        text-decoration: underline;
    }

    .btn-danger {
        background: #f5576c;
        color: white;
        border: 1px solid #f5576c;
    }

    .btn-danger:hover {
        background: #e04455;
        border-color: #e04455;
    }

    .btn-lock {
        background: #f39c12;
        color: white;
        border: 1px solid #f39c12;
    }

    .btn-lock:hover {
        background: #e67e22;
        border-color: #e67e22;
    }

    .status-badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 12px;
        font-size: 0.875rem;
        font-weight: 500;
    }

    .status-locked {
        background: #fff3cd;
        color: #856404;
    }

    .status-public {
        background: #d4edda;
        color: #155724;
    }

    /* Delete form (hidden) */
    .delete-form {
        display: none;
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
    function deleteDoc(docId, docTitle) {
        if (confirm(`确定要删除文档《${docTitle}》吗？\n\n此操作不可撤销！`)) {
            // Create form and submit
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/admin/delete/${docId}`;
            document.body.appendChild(form);
            form.submit();
        }
    }

    function toggleLock(docId, docTitle, isLocked) {
        const action = isLocked ? '解锁' : '锁定';
        const message = isLocked
            ? `确定要解锁文档《${docTitle}》吗？\n\n解锁后游客将可以查看此文档。`
            : `确定要锁定文档《${docTitle}》吗？\n\n锁定后游客将无法查看此文档。`;

        if (confirm(message)) {
            // Create form and submit
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/admin/toggle-lock/${docId}`;
            document.body.appendChild(form);
            form.submit();
        }
    }
</script>
{% endblock %}
